<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: grid;
            place-items: center;
            font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
            background: hsl(0 0% 0%);
            gap: 2rem;
        }

        body::before {
            --line: hsl(0 0% 95% / 0.25);
            content: "";
            height: 100vh;
            width: 100vw;
            position: fixed;
            background:
                    linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,
                    linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
            mask: linear-gradient(-15deg, transparent 30%, white);
            top: 0;
            z-index: -1;
        }

        section {
            display: grid;
            gap: 4rem;
            align-items: center;
            justify-content: center;
        }

        section p {
            margin: 0;
            font-size: 2.25rem;
            color: hsl(0 0% 40%);
            text-align: center;
            background: linear-gradient(hsl(0 0% 80%), hsl(0 0% 50%));
            color: transparent;
            background-clip: text;
        }

        .code {
            font-size: 3rem;
            display: flex;
            flex-wrap: nowrap;
            color: hsl(0 0% 100%);
            border-radius: 1rem;
            background: hsl(0 0% 6%);
            justify-content: center;
            box-shadow: 0 1px hsl(0 0% 100% / 0.25) inset;
        }

        .code:hover {
            cursor: grab;
        }

        .digit {
            display: flex;
            height: 100%;
            padding: 5.5rem 1rem;
        }

        .digit:focus-visible {
            outline-color: hsl(0 0% 50% / 0.25);
            outline-offset: 1rem;
        }

        .digit span {
            scale: calc(var(--active, 0) + 0.5);
            filter: blur(calc((1 - var(--active, 0)) * 1rem));
            transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s), filter calc(((1 - var(--active, 0)) + 0.2) * 1s);
        }

        ul {
            padding: 0;
            margin: 0;
        }

        .digit:first-of-type {
            padding-left: 5rem;
        }
        .digit:last-of-type {
            padding-right: 5rem;
        }

        :root {
            --lerp-0: 1; /* === sin(90deg) */
            --lerp-1: calc(sin(50deg));
            --lerp-2: calc(sin(45deg));
            --lerp-3: calc(sin(35deg));
            --lerp-4: calc(sin(25deg));
            --lerp-5: calc(sin(15deg));
        }

        .digit:is(:hover, :focus-visible) {
            --active: var(--lerp-0);
        }
        .digit:is(:hover, :focus-visible) + .digit,
        .digit:has(+ .digit:is(:hover, :focus-visible)) {
            --active: var(--lerp-1);
        }
        .digit:is(:hover, :focus-visible) + .digit + .digit,
        .digit:has(+ .digit + .digit:is(:hover, :focus-visible)) {
            --active: var(--lerp-2);
        }
        .digit:is(:hover, :focus-visible) + .digit + .digit + .digit,
        .digit:has(+ .digit + .digit + .digit:is(:hover, :focus-visible)) {
            --active: var(--lerp-3);
        }
        .digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit,
        .digit:has(+ .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
            --active: var(--lerp-4);
        }
        .digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit + .digit,
        .digit:has(+ .digit + .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
            --active: var(--lerp-5);
        }
    </style>
</head>
<body>
<section>
    <p>Glide To Reveal Secret Code</p>
    <ul class="code">
        <li tabindex="0" class="digit">
            <span>0</span>
        </li>
        <li tabindex="0" class="digit">
            <span>3</span>
        </li>
        <li tabindex="0" class="digit">
            <span>4</span>
        </li>
        <li tabindex="0" class="digit">
            <span>8</span>
        </li>
        <li tabindex="0" class="digit">
            <span>7</span>
        </li>
        <li tabindex="0" class="digit">
            <span>2</span>
        </li>
    </ul>
</section>
<script>
    const selects = document.querySelectorAll('.select');

    window.addEventListener('DOMContentLoaded', () => {
        selects.forEach(select => {
            const button = select.querySelector('button');
            const full_height = [];

            [...select.querySelectorAll('div > a')].map(link => {
                const styles = window.getComputedStyle(link);
                const box = link.getBoundingClientRect();
                const margin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom) || 0;
                const height = box.height + margin;
                full_height.push(height);

                link.addEventListener('click', () => {
                    const link_text = link.textContent;
                    const button_text = button.textContent;
                    button.textContent = link_text;
                    button.style.animationName="popOut";
                    button.addEventListener("animationend", () => {
                        button.style.animationName="none"
                    });
                    const span = document.createElement('span');
                    span.textContent = button_text;
                    link.innerHTML = "";
                    link.appendChild(span)
                    link.blur()
                })
            });

            const totalHeight = full_height.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
            select.dataset.totalHeight = totalHeight;
            select.style.setProperty('--max-height', totalHeight);
        });
    });

</script>
</body>
</html>